<template>
	<div class="home">
		<Carousel :banners="banners" />
		<!-- 推荐歌曲 -->
		<SongListV2 title="推荐歌曲" :transferData="recommendSongs" />
		<!-- 热门歌单 -->
		<SongList title="热门歌单" :transferData="hitLists" />
		<!-- 推荐歌单 -->
		<SongList title="推荐歌单" :transferData="recommendPlaylist" />
		<!-- 巅峰榜 -->
		<SongListV3 title="巅峰榜" :transferData="peakList" />
	</div>
</template>

<script>
import Carousel from '@/pages/home/subcomponent/carousel.vue';
import SongList from '@/pages/home/subcomponent/song-list.vue';
import SongListV2 from '@/pages/home/subcomponent/song-list-v2.vue';
import SongListV3 from '@/pages/home/subcomponent/song-list-v3.vue';
import { mapGetters } from 'vuex';
export default {
	components: {
		Carousel,
		SongList,
		SongListV2,
		SongListV3
	},
	data() {
		return {};
	},
	computed: {
		...mapGetters(['banners', 'hitLists', 'recommendPlaylist', 'recommendSongs', 'newRanking', 'originRanking', 'upRanking', 'peakList'])
	},
	async onLoad() {
		this.$store.dispatch('home/fetchBannerData', 2);
		this.$store.dispatch('home/fetchHitListsData');
		this.$store.dispatch('home/fetchRecommendPlaylistData');
		this.$store.dispatch('home/fetchRecommendSongData');
		await this.$store.dispatch('home/fetchNewRanking', 1);
		await this.$store.dispatch('home/fetchOriginRanking', 1);
		await this.$store.dispatch('home/fetchUpRanking', 1);
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.home {
	padding: 0 20rpx;
}
</style>
